<template>
  <div class="about">
    <h1 @click="flag=true">打开对话框</h1>
    <!-- visible 是否显示对话框
     属性 主要是父传子 能更改组件的功能 和样式 -->
     <el-dialog title="添加人员" :visible="flag" width="50%" @open="opendia">
      <!-- 具名插槽 title 标题 -->
       <!-- elementui的图标系统 icon 
        是字体图标 受到font-size和color的影响-->
       <template #title>
        <div style="color:red;text-align: left;">
          <i style="color:blue;font-size:50px;" class="el-icon-video-camera-solid"></i>
          <i class="el-icon-location"></i>
          <i class="el-icon-delete"></i>
          <i class="el-icon-plus"></i>
          <span>添加人员</span>
        </div>
       </template>
       <!-- 整体收集数据对象名 :model="" 
         规则的整体 挂载用 rules="rules"-->
          <el-form ref="myform" :model="userObj" :rules="rules">
            <!-- 单独个规则挂载 prop="username"-->
              <el-form-item label="姓名" prop="username">
                <el-input v-model="userObj.username"></el-input>
              </el-form-item>

              <el-form-item label="年龄" prop="age">
                <el-input v-model="userObj.age"></el-input>
              </el-form-item>
          </el-form>
          <el-button @click="toClear" type="primary">重置表单</el-button>
          <!-- 调用脚步插槽 -->
         <template #footer>
             <div>
              <el-button  type="success">确定</el-button>
              <el-button @click="flag=false" type="danger">取消</el-button>
             </div>
         </template>
     </el-dialog>
 
  </div>
</template>
<script>
// 使用ui组件库 
// 1. 组件的属性有哪些 封装的时候设计的父传子
// 2. 组件有哪些事件  封装的时候设计的子传父
// 3. 组件有哪些方法   子组件内部可以访问的方法 this.$refs.子组件.内部的方法（）
// 4. 组件设计哪些插槽  使用自定义内容和样式等

export default {
  data(){
    return {
      flag:false,//控制对话框的显示和隐藏
      userObj:{ //表单收集数据用的
         username:"",
         age:""
      },
      rules:{//表单规则用的
      // elementui提供了规则写法
        username:[//一个输入框可以有多个规则
          {required:true,message:"请输入姓名",trigger:"blur"},
          {min:2,max:5,message:"请输入2-5位姓名",trigger:"blur"}
        ],
        age:[
          {required:true,message:"请输入年龄",trigger:"blur"}
        ]
      }
     
    }
  },
   methods:{
    opendia(){ 
      //打开弹出层触发
      console.log("打开弹出层触发")
    },
    toClear(){
      // 调用表单组件自带的方法
      this.$refs.myform.resetFields()
    }
   }
}
</script>
